<template>
  <div class="animation01">
    <div class="page-wrapper" ref="pageWrapper"
      @touchstart.prevent="pTouchStart"
      @touchmove.prevent="pTouchMove"
      @touchend="pTouchEnd"
    >
      <transition-group name="fade">
        <div class="page" ref="page0" v-show="touch.currPageIndex === 0" key="0">
          <!--<div :style="{ width: '100px', height: '100px', backgroundColor: 'red' }" ref="testDiv"></div>-->
          <img @load="initImgSize('hxx')" ref="hxx" class="bg-img hxx cls-swing" :src="imgs.hxx">
          <img @load="initImgSize('wz1')" ref="wz1" class="bg-img wz1" :src="imgs.wz1">
          <img @load="initImgSize('wz2')" ref="wz2" class="bg-img wz2" :src="imgs.wz2">
          <img @load="initImgSize('ztx')" ref="ztx" class="bg-img ztx cls-square" :src="imgs.ztx">
          <img @load="initImgSize('lb')" ref="lb" class="bg-img lb cls-fade-out" :src="imgs.lb" >
        </div>
        <div class="page" ref="page1" v-show="touch.currPageIndex === 1" key="1">
          <img @load="initImgSize('pg2wz1')" ref="pg2wz1" class="bg-img pg2wz1" :src="imgs.pg2wz1">
          <img @load="initImgSize('pg2wz2')" ref="pg2wz2" class="bg-img pg2wz2" :src="imgs.pg2wz2">
          <img @load="initImgSize('pg2wz3')" ref="pg2wz3" class="bg-img pg2wz3" :src="imgs.pg2wz3">
          <img @load="initImgSize('pg2hs')" ref="pg2hs" class="bg-img pg2hs" :src="imgs.pg2hs">
          <img @load="initImgSize('pg2zhb')" ref="pg2zhb" class="bg-img pg2zhb" :src="imgs.pg2zhb">
          <img @load="initImgSize('pg2hlj')" ref="pg2hlj" class="bg-img pg2hlj cls-swing-hlj" :src="imgs.pg2hlj">
        </div>
        <div class="page" ref="page2" v-show="touch.currPageIndex === 2" key="2">page2</div>
      </transition-group>
      <div class="dots">
        <div class="dot" v-for="dot in dots" :key="dot.id" :class="getDotClass(dot.id)"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import animations from 'create-keyframe-animation'
// import { toggleClass } from 'common/js/dom'
// import { prefixStyle } from 'common/js/dom'
// let transform = prefixStyle('transform')
export default {
  name: 'animation01',
  data () {
    return {
      animTimer: null,
      imgs: {
        // img0100: require('./guide1/images/img_0.png'),
        // img0101: require('./guide1/images/img_1.png'),
        // img0102: require('./guide1/images/img_2.png'),
        // img0103: require('./guide1/images/img_3.png'),
        // img0104: require('./guide1/images/img_4.png'),
        // img0105: require('./guide1/images/img_5.png'),
        hxx: require('./guide1/images/img_6.png'),
        wz1: require('./guide1/images/img_8.png'),
        wz2: require('./guide1/images/img_9.png'),
        // img0110: require('./guide1/images/img_10.png'),
        // img0111: require('./guide1/images/img_11.png'),
        ztx: require('./guide1/images/img_12.png'),
        lb: require('./guide1/images/img_13.png'),
        pg2wz1: require('./guide2/images/img_0.png'),
        pg2wz2: require('./guide2/images/img_1.png'),
        pg2wz3: require('./guide2/images/img_3.png'),
        pg2hs: require('./guide2/images/img_12.png'),
        pg2zhb: require('./guide2/images/img_13.png'),
        pg2hlj: require('./guide2/images/img_11.png')
        // 002
      },
      imgsConf: {
        'lb': {
          left: 0.54,
          top: 0.45,
          'z-index': '-200'
        },
        'wz1': {
          left: 0.244,
          top: 0.319,
          'z-index': '-199'
        },
        'wz2': {
          left: 0.156,
          top: 0.50,
          'z-index': '-199'
        },
        'hxx': {
          left: 0.176,
          top: 0.62,
          'z-index': '-200'
        },
        'ztx': {
          left: 0.665,
          top: 0.525,
          'z-index': '-199'
        },
        'pg2wz1': {
          left: 0.133,
          top: 0.295,
          'z-index': '-199'
        },
        'pg2wz2': {
          left: 0.340,
          top: 0.295,
          'z-index': '-199'
        },
        'pg2wz3': {
          left: 0.408,
          top: 0.407,
          'z-index': '-199'
        },
        'pg2hs': {
          left: 0.15,
          top: 0.35,
          'z-index': '-204'
        },
        'pg2zhb': {
          left: 0.211,
          top: 0.576,
          'z-index': '-205'
        },
        'pg2hlj': {
          left: 0.277,
          top: 0.481,
          'z-index': '-201'
        }
      },
      touch: {
        touchFlag: false,
        currPageIndex: 0
      },
      dots: [
        {id: 0},
        {id: 1},
        {id: 2}
      ]
    }
  },
  methods: {
    initImgSize (refName) {
      let dpr = 2 // Math.round(window.devicePixelRatio)
      let natWidth = this.$refs[refName].naturalWidth
      let natHeight = this.$refs[refName].naturalHeight
      this.$refs[refName].style.width = Math.round(natWidth * dpr / 4) + 'px'
      this.$refs[refName].style.height = Math.round(natHeight * dpr / 4) + 'px'
      this.$refs[refName].style.zIndex = this.imgsConf[refName]['z-index']
      this.$refs[refName].style.left = Math.round(window.innerWidth * this.imgsConf[refName].left) + 'px'
      this.$refs[refName].style.top = Math.round(window.innerHeight * this.imgsConf[refName].top) + 'px'
    },
    // doAnimation () {
    //   clearTimeout(this.animTimer)
    //   this.animTimer = setTimeout(() => {
    //     let currPageIndex = 0
    //     switch (currPageIndex) {
    //       case 0:
    //         // console.log('rock')
    //         // this.$refs.mstar.style.animation = 'mrock 2s'
    //         break
    //       case 1:
    //       default:
    //     }
    //   }, 2000)
    // },
    getDotClass (dotIndex) {
      return dotIndex === this.touch.currPageIndex ? 'active' : ''
    },
    pTouchStart (e) {
      this.touch.touchFlag = true
      // console.log('pTouchStart', e)
      // 记录首次触点坐标
      this.touch.startPageX = e.touches[0].pageX
      this.touch.startPageY = e.touches[0].pageY
    },
    pTouchMove (e) {
      if (!this.touch.touchFlag) return
      // console.log('pTouchMove', e)
      let movedPageX = e.touches[0].pageX
      // 计算与touchStart的偏移值
      let diffPageX = movedPageX - this.touch.startPageX
      diffPageX = parseInt(diffPageX)
      this.touch.diffPageX = diffPageX
      let needTransForm = Math.min(Math.max(this.touch.minTransformLeft, diffPageX), this.touch.maxTransformLeft)
      this.touch.movedPercent = Math.abs((1.0 * diffPageX / this.touch.pageWidth).toFixed(2))
      // let opacityVal = 1 - this.touch.movedPercent * 2
      this.$refs['page' + this.touch.currPageIndex].style.transform = `translate3d(${needTransForm}px, 0, 0)`
      // this.$refs['page' + this.touch.currPageIndex].style.opacity = opacityVal
    },
    pTouchEnd () {
      this.touch.touchFlag = false
      // console.log('pTouchEnd')
      // 计算是否显示下一个page
      let nextPageIndex = this.touch.currPageIndex
      if (this.touch.movedPercent > 0.2) {
        this.touch.diffPageX < 0 ? nextPageIndex++ : nextPageIndex--
        if (nextPageIndex < 0) {
          nextPageIndex = this.touch.pageCounts - 1
        }
        if (nextPageIndex >= this.touch.pageCounts) {
          nextPageIndex = 0
        }
      }
      this.touch.currPageIndex = nextPageIndex
      // console.log('nextPageIndex', nextPageIndex, 'movedPercent', this.touch.movedPercent, 'diffPageX', this.touch.diffPageX)
      this.$refs['page' + this.touch.currPageIndex].style.transform = 'translate3d(0, 0, 0)'
      // this.$refs['page' + this.touch.currPageIndex].style.opacity = '1'
    },
    initTouchData () {
      this.touch.pageWidth = window.innerWidth
      this.touch.pageCounts = this.$refs.pageWrapper.children[0].children.length
      this.touch.minTransformLeft = -parseInt(this.touch.pageWidth)
      this.touch.maxTransformLeft = parseInt(this.touch.pageWidth)
    }
  },
  mounted () {
    this.initTouchData()
    setTimeout(() => {
    }, 4000)
    console.log('window.devicePixelRatio', Math.round(window.devicePixelRatio))
    console.log('window.innerWidth', window.innerWidth)
    console.log('window.innerHeight', window.innerHeight)
    // console.log(this.$refs.mstar.width)
    // console.log(this.$refs.mstar.height)
    // console.log(this.$refs.mstar.naturalWidth)
    // console.log(this.$refs.mstar.naturalHeight)
  },
  created () {

  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.animation01
  position: fixed
  left: 0
  top: 0
  right: 0
  bottom: 0
  .page-wrapper
    width: 100%
    height: 100%
    overflow: hidden
    white-space: nowrap
    position: relative
    // background: #80FFFF
    .page
      display: inline-block
      position: relative
      width: 100%
      height: 100%
      box-sizing: border-box
      padding: 10px
      // box-shadow: 0 0 0px 5px black inset
      .bg-img
        position: absolute
        background-repeat: no-repeat
    .dots
      position: absolute
      left: 0
      right: 0
      bottom: 20px
      text-align: center
      .dot
        display: inline-block
        margin: 0 12px
        width: 10px
        height: 10px
        border-radius: 50%
        background: rgba(100, 100, 100, .3)
        &.active
          background: rgba(0, 0, 240, .5)
  .fade-enter-active
    transition: opacity 1s
  .fade-enter
    opacity: 0
  .cls-swing
    animation: swingAnima 2s 4
  .cls-swing-hlj
    animation: swingHlj 1s linear 6
    transform-origin: 0 0 0
  .cls-fade-out
    animation: fadeOut 1s
    animation-fill-mode: forwards
  .cls-square
    animation: squareAnima 5s linear 1 forwards
@keyframes squareAnima
  0%
    transform: translate3d(100px, 0, 0)
  8%
    transform: translate3d(15px, 0, 0)
  16%
    transform: translate3d(15px, 15px, 0)
  32%
    transform: translate3d(0, 15px, 0)
  40%
    transform: translate3d(0, 0, 0)
  48%
    transform: translate3d(15px, 0, 0)
  56%
    transform: translate3d(15px, 15px, 0)
  64%
    transform: translate3d(0, 15px, 0)
  72%
    transform: translate3d(0, 0, 0)
  80%
    transform: translate3d(15px, 0, 0)
  88%
    transform: translate3d(15px, 15px, 0)
  96%
    transform: translate3d(0, 15px, 0)
  100%
    transform: translate3d(0, 0, 0)
@keyframes swingAnima
  0%
    transform: rotate(0deg)
  25%
    transform: rotate(45deg)
  50%
    transform: rotate(0deg)
  75%
    transform: rotate(-45deg)
  100%
    transform: rotate(0deg)
@keyframes swingHlj
  0%
    transform: rotate(0deg)
  50%
    transform: rotate(6deg)
  100%
    transform: rotate(0deg)
@keyframes fadeOut
  0%
    opacity: 0
    transform: translate3d(100px, 0, 0)
  100%
    opacity: 1
    transform: translate3d(0, 0, 0)
</style>
